<template>
  <div class="soft">
    <!-- 横幅引导卡 -->
    <div class="wrapper-banner">
      <img src="@/assets/resource-banner.jpg" alt="" />
      <div class="desc">
        <h1>
          <el-icon><Promotion /></el-icon>
          视频教程资源
        </h1>
        <font>
          这里包含所有的视频教程相关资源，包括课程笔记、
          课程中用到的软件、用到的Jar依赖、前端模版等。我们提供多种云盘下载，
          推荐夸克云盘，不限速可以直接下载，文档阅读推荐使用Typora软件。
        </font>
      </div>
      <div class="download">
        <div class="btn">
          <button class="button">
            <img src="@/assets/resource-icon1.svg" alt="" />
            <span>百度云盘下载</span>
          </button>
          <button class="button">
            <img src="@/assets/resource-icon2.svg" alt="" />
            <span>夸克云盘下载</span>
          </button>
          <button class="button">
            <img src="@/assets/resource-icon3.svg" alt="" />
            <span>阿里云盘下载</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 资源区 -->
    <div class="resource-content">
      <el-empty description="description" v-if="isEmpty" />
      <div
        class="load"
        style="height: 300px; display: flex; align-items: center"
        v-if="isLoad"
      >
        <Load />
      </div>
      <!-- 开发工具 -->
      <div
        class="software-utils"
        v-for="(item, index) in props.resourceSoftWareDada"
        :key="index"
        v-show="!isLoad && !isEmpty"
      >
        <h3>
          <el-image
            :src="item.icon"
            style="
              width: 25px;
              height: 25px;
              margin-right: 10px;
              cursor: pointer;
            "
          ></el-image>
          {{ item.categryName }}
        </h3>
        <ul class="list">
          <li
            class="item"
            v-for="softWare in item.resourceInfoList"
            :key="softWare.id"
          >
            <el-tooltip
              class="box-item"
              effect="dark"
              content="点击查看安装说明文档"
              placement="top-start"
            >
              <div class="item-image" @click="toUploadDoc(softWare)">
                <el-image
                  :src="softWare.resourceImage"
                  fit="cover"
                  style="width: 60%; height: 60%; cursor: pointer"
                ></el-image>
              </div>
            </el-tooltip>
            <div class="item-right">
              <div class="item-desc">
                <div class="title">
                  <font>{{ softWare.resourceName }}</font>
                  <el-tag
                    size="small"
                    type="info"
                    v-if="softWare.isRecommend"
                    style="margin-left: 5px"
                    >推荐</el-tag
                  >
                </div>
                <div class="description">
                  {{ softWare.resourceDesc }}
                </div>
              </div>
              <div class="item-downLoad">
                <ul>
                  <li
                    style="--i: #cedfff; --j: #2258be"
                    @click="download(softWare.resourceUrl)"
                  >
                    <span class="icon">
                      <svg
                        t="1706357670957"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8841"
                        width="50"
                        height="50"
                      >
                        <path
                          d="M663.466667 701.866667c-17.066667-17.066667-42.666667-17.066667-59.733334 0L554.666667 750.933333V435.2c0-23.466667-19.2-42.666667-42.666667-42.666667s-42.666667 19.2-42.666667 42.666667v313.6l-46.933333-46.933333c-17.066667-17.066667-42.666667-17.066667-59.733333 0s-17.066667 42.666667 0 59.733333l121.6 121.6c6.4 8.533333 17.066667 12.8 27.733333 12.8s21.333333-4.266667 29.866667-12.8l121.6-121.6c17.066667-14.933333 17.066667-42.666667 0-59.733333z"
                          fill="#80B8F8"
                          p-id="8842"
                        ></path>
                        <path
                          d="M812.8 388.266667C793.6 241.066667 663.466667 128 512 128S230.4 241.066667 211.2 388.266667c-102.4 19.2-179.2 113.066667-172.8 221.866666 6.4 113.066667 106.666667 200.533333 219.733333 200.533334h64c8.533333 0 10.666667-8.533333 6.4-14.933334-32-32-36.266667-85.333333-6.4-119.466666 23.466667-25.6 57.6-34.133333 89.6-25.6 4.266667 2.133333 10.666667-2.133333 10.666667-8.533334v-206.933333c0-49.066667 36.266667-85.333333 89.6-85.333333s89.6 34.133333 89.6 85.333333v206.933333c0 6.4 4.266667 10.666667 10.666667 8.533334 32-8.533333 66.133333 0 89.6 25.6 29.866667 34.133333 25.6 87.466667-6.4 119.466666-6.4 6.4-2.133333 14.933333 6.4 14.933334h64c115.2 0 213.333333-87.466667 219.733333-200.533334 6.4-108.8-70.4-202.666667-172.8-221.866666z"
                          fill="#80B8F8"
                          p-id="8843"
                        ></path>
                      </svg>
                    </span>
                    <span class="title">下载</span>
                  </li>
                </ul>

                <div class="icon">
                  <i class="iconfont">&#xe668;</i>
                  <i class="iconfont">&#xe667;</i>
                  <i class="iconfont">&#xe697;</i>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <el-dialog v-model="loginDialogVisible" width="500">
      <span>请先登录您的账号</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="loginDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="$router.push('/login')">
            登录
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import Load from "@/components/Load.vue";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";

const loginDialogVisible = ref(false);

const userStore = useUserStore();

const $router = useRouter();

const props = defineProps(["resourceSoftWareDada", "isLoad", "isEmpty"]);

const download = (url) => {
  window.open(url);
  // if (localStorage.getItem("satoken") && userStore.userName) {
  //   // window.open(url);
  // } else {
  //   loginDialogVisible.value = true;
  // }
};

const toUploadDoc = (data) => {
  $router.push({
    query: {
      id: data.id,
    },
    path: "/upload-resource-doc",
  });
};
</script>

<style scoped lang="scss">
.soft {
  width: 100%;
  .wrapper-banner {
    width: 100%;
    height: 250px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .desc {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 20px;
      h1 {
        width: 100%;
        color: #fff;
        display: flex;
        align-items: center;
      }
      font {
        width: 80%;
        display: block;
        color: #fff;
        line-height: 25px;
      }
    }
    .download {
      width: 50%;
      height: 30%;
      position: absolute;
      right: 20px;
      bottom: 0;
      .btn {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .button {
          cursor: pointer;
          width: fit-content;
          display: flex;
          padding: 0.8em 1.1em;
          gap: 0.4rem;
          border: none;
          font-weight: bold;
          border-radius: 30px;
          margin-right: 20px;
          text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
          background: linear-gradient(
              15deg,
              #880088,
              #aa2068,
              #cc3f47,
              #de6f3d,
              #f09f33,
              #de6f3d,
              #cc3f47,
              #aa2068,
              #880088
            )
            no-repeat;
          background-size: 300%;
          background-position: left center;
          transition: background 0.3s ease;
          color: #fff;
        }

        .button:hover {
          background-size: 320%;
          background-position: right center;
        }
        .button:hover svg {
          fill: #fff;
        }

        .button svg {
          width: 23px;
          fill: #f09f33;
          transition: 0.3s ease;
        }
      }
    }
  }
  .resource-content {
    width: 100%;
    height: auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: scroll;
    h3 {
      margin: 15px 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      color: #515151;
      svg {
        margin-right: 10px;
      }
    }
    ul.list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;

      li.item {
        width: 32%;
        height: 75px;
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #ececec;
        margin-top: 30px;
        margin-left: 1%;
        .item-image {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item-right {
          flex: 4;
          display: flex;
          .item-desc {
            flex: 3;
            .title {
              display: flex;
              width: 100%;
              height: 32%;
              padding: 0 5px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font {
                margin-right: 5px;
              }
            }
            .description {
              font-size: 12px;
              color: #999;
              line-height: 23px;
              padding: 5px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .item-downLoad {
            flex: 1;

            ul {
              position: relative;
              display: flex;
              gap: 25px;
              width: 100%;
              justify-content: center;
            }

            ul li {
              position: relative;
              list-style: none;
              width: 50%;
              height: 40px;
              background: #fff;
              border-radius: 60px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
              transition: 0.5s;
            }

            ul li:hover {
              width: 100%;
              box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
            }

            ul li::before {
              content: "";
              position: absolute;
              inset: 0;
              border-radius: 60px;
              background: linear-gradient(45deg, var(--i), var(--j));
              opacity: 0;
              transition: 0.5s;
            }

            ul li:hover::before {
              opacity: 1;
            }

            ul li::after {
              content: "";
              position: absolute;
              top: 10px;
              width: 100%;
              height: 100%;
              border-radius: 60px;
              background: linear-gradient(45deg, var(--i), var(--j));
              transition: 0.5s;
              filter: blur(15px);
              z-index: -1;
              opacity: 0;
            }

            ul li:hover::after {
              opacity: 0.5;
            }

            ul li .icon {
              color: #777;
              font-size: 1.45em;
              transition: 0.5s;
              transition-delay: 0.25s;
              scale: 0.8;
            }

            ul li:hover .icon {
              transform: scale(0);
              color: #fff;
              transition-delay: 0s;
            }

            ul li span {
              position: absolute;
            }

            ul li .title {
              color: #fff;
              scale: 0.9;
              text-transform: uppercase;
              letter-spacing: 0.1em;
              transform: scale(0);
              transition: 0.5s;
              transition-delay: 0s;
            }

            ul li:hover .title {
              transform: scale(1);
              transition-delay: 0.25s;
            }

            .icon {
              width: 100%;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #4a4a4a;
            }
          }
        }
      }
    }
  }
}

// @media screen and (min-width: 1000px) {
//   .download {
//     .btn {
//       width: 30px;
//       height: 30px;
//     }
//   }
// }
@media (max-width: 1000px) {
  .download {
    .btn button {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 25px !important;
        height: 25px !important;
      }
      /* 如果有需要，可以在这里添加其他样式属性 */
      span {
        display: none;
      }
    }
  }
}
</style>